@charset 'utf-8';
@import "common/_reset";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .web {
        width: 100%;
        height: 100%;
        position: relative;
        .bigBox {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: orangered;
            overflow: hidden;
            .row {
                width: 100%;
                height: 150px;
                background-color: #fff;
                position: absolute;
                transform: translateY(-150px); // 在顶部-150px处生成
                top: -150px;
                left: 0;
                overflow: hidden;
                .row-box {
                    width: 25%;
                    float: left;
                    height: 100%;
                    border: 1px solid #fff;
                    overflow: hidden;
                }
                .bgBlack {
                    background: #000;
                    border: 1px solid #fff;
                }
                .bgBlack2 {
                    background: #ebebeb;
                    width: 25%;
                    float: left;
                    height: 100%;
                    border: 1px solid #ebebeb;
                    overflow: hidden;
                }
            }
        }
        
        .go,
        .over {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2;
            .num {
                width: 60%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                p {
                    width: 100%;
                    font-size: 2rem;
                    color: orangered;
                }
            }
            .num2 {
                p {
                    font-size: 0.8rem;
                    text-align: center;
                }
                a {
                    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
                    -webkit-user-select: none;
                    -moz-user-focus: none;
                    -moz-user-select: none;
                    outline: none;
                    i {
                        margin: 0.2rem auto 0;
                        display: block;
                        color: orangered;
                        font-size: 1.5rem;
                        width: 1.5rem;
                    }
                }
            }
        }
        .over {
            display: none;
        }
        .score {
            position: fixed;
            top: 0.1rem;
            right: 0.3rem;
            z-index: 2;
            p {
                font-size: 1rem;
                color: orangered;
            }
        }
    } // 点击白块动画
    .writeAnim {
        background: orangered;
        animation-name: myW;
        animation-duration: 0.4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    @keyframes myW {
        0% {
            opacity: 0;
        }
        33.3% {
            opacity: 1;
        }
        66.6% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}